html, body{
  font-family: Calibri, Geneva, Tahoma, sans-serif;
  font-size: 15px;
}

.animated-card {
  width: 320px;
  margin: auto;
  transition: all 0.3s ease; /* Add smooth transition for box-shadow */
  border-radius: 20px;
  height: 576px;
}

.animated-card > p {
  margin: 0;
}


.animated-card > img{
  border-radius: 20px 20px 0 0;
  height: 320px;
  width: 320px;
}

.animated-card:hover {
  box-shadow: 0 0 10px rgba(246, 208, 80, 0.5); /* Apply box shadow on hover */
  transform: scale(1.05);
}

.btn-card__bottom{
  position: absolute;
  bottom: 20px;
  left: 15px;
}
.loading > img{

  /* Add animation properties */
  animation-name: spin;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.navbar-img{
  height: 20px;
  position: absolute;
  top: calc(50% - 10px);
  right: 3%;
}

.drag-drop-field {
  border: 2px dashed #ccc;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 20px;
}

.drag-drop-field p {
  margin: 0;
}

.drag-drop-field:hover {
  border-color: #aaa;
}

.drag-drop-field.active {
  background-color: #f0f0f0;
}
.drag-drop-field__extensions{
  margin-top: 5px;
  font-size: 12px;
  color: #aaa;
}
.active{
  color: #fff;
}
/* Styles for the overlay */
.modal{
  display: block;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0, 0.4);
}
.modal__active{
  display: block;
}
.modal__content{
  background-color: #fff;
  width: 50%;
  margin: 15% auto 0;
  padding: 32px;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  position: relative;
  animation-name: animatetop;
  animation-duration: 0.4s;
}

.modal__content h2{
  color: #aaa;
}

.modal-input__text{
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  color: #1a1d1f;
  font-size: 18px;
  margin-bottom: 10px;
}
.modal-input__text:hover {
  border: none;
  border-bottom: 1px solid #1a1d1f;
}
.modal-input__text:focus{
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #1a1d1f;
  outline: none;
}

.modal-input__checkbox-container {
  display: flex;
  flex-wrap: wrap;
}

.modal-input__checkbox-item {
  flex: 0 0 calc(50% - 10px); /* Adjust the width as per your requirement */
  margin-right: 10px; /* Adjust spacing between checkboxes */
  margin-bottom: 10px; /* Adjust spacing between rows */
  display: flex;
  align-items: center;
}

.modal-input__checkbox-item label{
  color: black;
}



/* Style the custom checkbox */
.custom-checkbox {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #eee; /* Changed background color */
  border: 2px solid #aaa;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  margin-right: 10px;
}





@media screen and (max-width: 480px) {
  .modal__content {
    width: 80%;
  }
}

/* Media query for tablets */
@media screen and (min-width: 481px) and (max-width: 1024px) {
  .modal__content {
    width: 50%;
  }
}

/* Media query for wide screens */
@media screen and (min-width: 1025px) {
  .modal__content {
    width: 400px;
  }
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #333;
}
.modal__close:hover,
.modal__close:focus{
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.img__ali{
  width: 50%;
  margin: 0 25%;
}

.modal-buttons__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f0f0f0;
}

.modal-buttons__name {
  flex: 1; /* This will make the name take up remaining space */
  text-align: left;
  color: black;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}

.modal-buttons__col{
  display: flex;
  flex-direction: column;
  width: 70%;
}

.modal-buttons__specification, .modal-buttons__result{
  color: black;
  margin: 0;
  font-size: 12px;

}

.modal-buttons__button {
  width: 128px;
  --bs-btn-font-size: 12px;
  margin: 5px 5px;
}

.input-control__buttons{
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
}

@keyframes animatetop {
  from{
    top: -300px;
    opacity: 0;
  }
  to{
    opacity: 1;
    top: 0;
  }
}


/* HTML: <div class="loader"></div> */
.loader {
  width: 200px;
  margin: 50px auto;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid #514b82;
  animation:
          l20-1 0.8s infinite linear alternate,
          l20-2 1.6s infinite linear;
}
@keyframes l20-1{
  0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
  12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
  25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
  50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
  62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
  75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
  100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{
  0%    {transform:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(135deg)}
  50%   {transform:scaleY(-1) rotate(0deg)}
  100%  {transform:scaleY(-1) rotate(-135deg)}
}

.footer{
  bottom: 0;
  width: 100%;
}

.main-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-addtype{
  background-color: transparent;
  font-size: 25px;
  padding: 0 5px 0 0;
  color: #ccc
}

.btn-addtype:hover{
  color: white;
}

.main-page{
  padding: 24px 0;
  min-height: calc(100vh - 56px);
  margin-bottom: 56px;
}

.card-badge{
  background-color: transparent;
  border-radius: 15px;
  min-width: 64px;
  height: 22px;
  font-size: 19px;
  text-align: right;
  position: absolute;
  padding: -5px;
  top: 335px;
  right: 15px;
  color: #50973f;
}

.tg-icon{
  background-color: transparent;
  color: rgba(255, 255, 255, 0.2);
}

.icons{
  display: flex;
  position: absolute;
  justify-content: space-between;
  bottom: 5px;
  right: 5px;
  width: 50px;
}

.description-icon{
  margin-right: 16px;
  color: #4d5053;
}

.uploaded-file__container{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.uploaded-file__filename{

}

.uploaded-file__item{
  margin: 10px 10px 0 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*border-bottom: 1px solid #f0f0f0;*/
  background-color: rgba(109, 116, 123, 0.5);
  border-radius: 15px;
  padding: 0 10px;
}

.uploaded-file__item.wrong{
  background-color: rgba(241, 40, 40, 0.5);
}

.uploaded-file__item > span{
  font-size: 16px;
}
.uploaded-file__button{
  /*position: absolute;*/
  /*top: 50%;*/
  /*right: 5px;*/
  padding-left: 0;
  padding-right: 0;
  margin-left: 10px;
}

.fa-big{
  font-size: 50px;
  margin-bottom: 20px;
}

.btn-group{
  width: 100%;
}

.dropdown-my{
  display: inline-block;
}
.dropdown-menu-lg{
  width: 50%;
}


.status{
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
  border-radius: 15px;
  margin: 20px 0;
}
.ok{
  background-color: green;
  text-transform: none;
}
.bad{
  background-color: red;
  text-transform: none;
}

.response-file__container{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  border: 1px solid #424449;
  border-radius: 5px;
  padding-left: 20px;
  margin-bottom: 10px;
  min-height: 45px;
}

.response-file__key{
  display: flex;
  align-items: center;
}

.response-file__category{
  margin-left: 15px;
  background-color: #424444;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  min-width: 150px;
  color: #dde0e3;
}

code{
  color: #dde0e3;
}

.bg-red{
  background-color: red;
}

.bg-green{
  background-color: green;
}

.bg-yellow{
  background-color: rgba(255, 0, 0, 0.53);
  color: black;
}

.d-block{
  display: block;
  width: 100%;
}


